<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<!--responsive mate -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="description" content="搜集所有应用稳定的框架，jq，ui等">
	<meta name="author" content="Dc">
	<meta name="keyword" content="Dc,bootstarp,zui,flatui,DcUi,jquery,modal,datatable">
	<link rel="shortcut icon" href="favicon.ico">
	<!-- Bootstrap core CSS -->
	<!--flat-->
	<!--flat media-->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<title>基础表单</title>

	<link rel="stylesheet" href="assets/zui/css/zui.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/style-responsive.css" />
</head>

<body>
	<header class="panel-heading bg-primary">
		基础表单
	</header>
	<div class="panel  clearfix">
		<h2 class="panel-heading">目录</h2>
		<div class="panel-body">
			<ul class="list-unstyled col-md-6">
				<li>
					<a href="#form">基础表单</a>
				</li>
				<li>
					<a href="#form-style">表单样式属性</a>
				</li>
			</ul>
		</div>

	</div>

	<!--不浮动 边距-15-->
	<div class="row">
		<!--基础表单-->
		<!-- 栅格6-->
		<section class="col-md-6" id="form">
			<!--白色背景 填充15-->
			<div class="panel">
				<!--填充头部-->
				<header class="panel-heading">
					水平表单
					<!-- <small>form-horizontal>form-group>control-label+div.form-control</small> -->
				</header>
				<!--15填充-->
				<div class="panel-body">
					<form role="form " class="form-horizontal">
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">文本</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" placeholder="请输入文本"></div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">电话</label>
							<div class="col-sm-9">
								<input type="tel" class="form-control" placeholder="请输入电话号码">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">数字</label>
							<div class="col-sm-9">
								<input type="number" class="form-control" placeholder="请输入数字">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">邮箱</label>
							<div class="col-sm-9">
								<input type="email" class="form-control" placeholder="请输入数字">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">密码</label>
							<div class="col-sm-9">
								<input type="password" class="form-control" placeholder="请输入密码">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">日期</label>
							<div class="col-sm-9">
								<input type="date" class="form-control" placeholder="请选择日期">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">时间</label>
							<div class="col-sm-9">
								<input type="time" class="form-control" placeholder="请选择时间">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">月份</label>
							<div class="col-sm-9">
								<input type="month" class="form-control" placeholder="请选择月份">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">周</label>
							<div class="col-sm-9">
								<input type="week" class="form-control" placeholder="请选择周">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">日期时间</label>
							<div class="col-sm-9">
								<input type="datetime-local" class="form-control" placeholder="请选择日期和时间">
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">多项选择</label>
							<div class="col-sm-9">
								<select class="form-control" class="form-control">
										<option>请选择</option>
									</select>
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">选择框</label>
							<div class="col-sm-9">
								<select class="form-control" multiple class="form-control">
										<option>请选择</option>
										<option>选项二</option>
									</select>
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="control-label col-sm-3">上传</label>
							<div class="col-sm-9">
								<input type="file" id="inputfile">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">多选+inline布局</label>
							<div class="checkbox col-sm-9">
								<label>
      			<input type="checkbox" name="r"> 请打勾
      		</label>

								<label>
      			<input type="checkbox" name="r"> 请打勾
      		</label>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">单选+间隔布局</label>
							<div class="radio col-sm-4">
								<label>
      								<input type="radio" name="r"> 请打勾
      							</label>
							</div>
							<div class="radio col-sm-4">
								<label>
      								<input type="radio" name="r"> 请打勾
      							</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">纯文本对齐</label>
							<div class="col-sm-9">
								<p class="form-control-static">p.form-control-static </p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">添加备注</label>
							<div class="col-sm-9">
								<input class="form-control" type="text" placeholder="" />
								<p class="">(备注)</p>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-3">文本域</label>
							<div class="col-sm-9 " style="margin-bottom:15px;">
								<textarea class="form-control" cols="60" rows="5"></textarea>
							</div>
							<footer class="twt-footer clearfix">

								<button class="btn btn-space btn-info  pull-right" type="button">修改</button>
								<button class="btn btn-space btn-warning  pull-right" type="button" style="margin-right:15px">取消</button>
							</footer>
					</form>
					</div>
				</div>
		</section>
		<!--表单属性-->
		<section class="col-md-6" id="form-style">
			<div class="panel">
				<header class="panel-heading">
					表单属性
				</header>
				<div class="panel-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-sm-3">
									作废 <small>disabled</small>
								</label>
							<div class="col-sm-9">
								<input type="text" placeholder="disabled" disabled class="disabled form-control" />
							</div>
						</div>
						<div class="form-group has-success">
							<label class="col-sm-3 control-label" for="inputSuccess">
         输入成功<small >.has-success</small>
      </label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inputSuccess">
							</div>
						</div>
						<div class="form-group has-warning">
							<label class="col-sm-3 control-label" for="inputWarning">
         输入警告<small>.has-warning</small>
      </label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inputWarning">
							</div>
						</div>
						<div class="form-group has-error">
							<label class="col-sm-3 control-label" for="inputError">
         输入错误<small>.has-error</small>
      </label>
							<div class="col-sm-9">
								<input type="text" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="inputError">
         大号样式<small > .input-lg</small>
      </label>
							<div class="col-sm-9">
								<input type="text" class="input-lg form-control">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="inputError">
         小号样式<small > .input-sm</small>
      </label>
							<div class="col-sm-9">
								<input type="text" class="input-sm form-control">
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
		</div>



</body>

</html>